<template>
  <div>
    <!-- 标题 -->
    <v-title></v-title>
    <header style="height: 0.6rem;">
      <!-- 这是头部一级导航 -->
      <ul class="typelist">
        <li v-for="item in typelist" :key="item.id" @click="golist(item.id)">
          {{ item.catename }}
        </li>
      </ul>
    </header>

    <!-- 轮播图 -->
    <v-banner></v-banner>

    <!-- 限时秒杀等活动 -->
    <van-grid :border="false" :column-num="5" class="grid" :gutter="10">
      <van-grid-item>
        <van-image
          src="https://img1.baidu.com/it/u=3765180793,1852045127&fm=253&fmt=auto&app=120&f=JPEG?w=700&h=700"
        />
        <p>限时秒杀</p>
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="https://img0.baidu.com/it/u=3821454485,3821920362&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
        />
        <p>品质大牌</p>
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="https://img2.baidu.com/it/u=3662753475,3699403655&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
        />
        <p>畅销商品</p>
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="https://img0.baidu.com/it/u=1237356756,3545004668&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400"
        />
        <p>小U自营</p>
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="https://img2.baidu.com/it/u=2152138554,193193330&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
        />
        <p>积分商城</p>
      </van-grid-item>
    </van-grid>

    <!-- 三个tab切换 -->
    <van-tabs type="card" title-active-color="#fff" color="#FEA600">

      <van-tab title="热门推荐">
        <van-card
          v-for="item in hotlist"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price | toPrice"
          @click="godetail(item.id)"
        />
        

      </van-tab>


      <van-tab title="上新推荐">
        <van-card
          v-for="item in newlist"
          :key="item.id"
          num="1"
          :price="item.price"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price"
          @click="godetail(item.id)"
        />
      </van-tab>


      <van-tab title="全部商品">
        <van-card
          v-for="item in alllist"
          :key="item.id"
          num="1"
          :price="item.price"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price"
          @click="godetail(item.id)"
        />
      </van-tab>
    </van-tabs>

    <div id="ccc"></div>
  </div>
</template>


<script>
import { getcate, gethortgoods } from "../request/app";
// 引入轮播图
import vBanner from "../components/banner.vue";
export default {
  data() {
    return {
      typelist: [],
      hotlist: [],
      newlist: [],
      alllist: [],
    };
  },
  methods: {
    // 跳转到一级分类
    golist(id) {
      this.$router.push({
        path: "/list",
        query: {
          id,
        },
      });
    },
    // 跳转商品详情
    godetail(id){
      this.$router.push({
        path:'/detail',
        query:{
          id
        }
      })
    }
  },
  mounted() {
    // 获取头部一级导航头
    getcate().then((val) => {
      // 判断是否正确
      if (val.code != 200) {
        alert(val.msg);
        return;
      }
      // 正确传递数据
      this.typelist = val.list;
    });

    // 获取三个tab
    gethortgoods().then((val) => {
      // 判断是否正确
      if (val.code != 200) {
        alert(val.msg);
        return;
      }
      this.hotlist = val.list[0].content;
      this.newlist = val.list[1].content;
      this.alllist = val.list[2].content;
    });
  },
  components: {
    vBanner,
  },
};
</script>


<style scoped>
@import "../assets/css/home.css";
</style>